// useTheme.ts
import { useState, useEffect } from 'react';
import { themes } from './themeConfig';

// 定义主题类型
type ThemeName = 'light' | 'dark' | 'blue' | 'default';

export const useTheme = () => {
    const [currentTheme, setCurrentTheme] = useState<ThemeName>('light');

    const applyTheme = (theme: ThemeName) => {
        const root = document.documentElement;
        Object.entries(themes[theme]).forEach(([key, value]) => {
            root.style.setProperty(`--${key}`, value);
        });
        root.setAttribute("data-theme", currentTheme);
    };

    const toggleTheme = () => {
        console.log(currentTheme,'ThemeName');
        
        const newTheme: ThemeName = currentTheme === 'light' ? 'dark' : 'light';
        setCurrentTheme(newTheme);
        applyTheme(newTheme);
    };

    return { currentTheme, toggleTheme };
};
